<template>
    <Head>
        <Title>小红书 - 登录</Title>
        <Meta name="description" content="2 亿人的生活经验，都在小红书" />
    </Head>
    <el-card class="m-auto w-1000px">
        <div class="flex h-full h-460px">
            <div class="flex-1 flex justify-center items-center border-gray-300 border-r border-solid">
                <img class="w-60px h-22px" src="~/assets/img/logo.png" alt="">
            </div>
            <div class="flex-1 text-center px-6">
                <p class="text-xl font-bold py-6">手机号登录</p>
                <el-form label-position="right" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
                    <el-form-item class="!my-6" label="手机号">
                        <el-input class="!w-220px !h-40px" v-model="formLabelAlign.phone" placeholder="输入手机号">
                            <template #prepend>+86</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="!my-6" label="密码">
                        <el-input class="!w-220px !h-40px" type="password" show-password v-model="formLabelAlign.password"
                            placeholder="输入密码" />
                    </el-form-item>
                </el-form>
                <el-button @click="toLogin" color="#ff2e4d" class="w-280px bg !h-48px" type="danger" round>登录</el-button>
                <div>
                    <el-checkbox v-model="checked1" label="" size="large" />
                    <span class="text-sm">我已阅读并同意</span>
                    <span class="text-sm text-blue-900">《用户协议》《隐私政策》《儿童/青少年个人信息保护规则》</span>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
const checked1 = ref(true)
const formLabelAlign = reactive({
    phone: '',
    password: ''
})
const toLogin = async () => {
    const { code, msg } = await $fetch('/api/user/login', {
        method: "post",
        body: JSON.stringify({
            phone: formLabelAlign.phone,
            password: formLabelAlign.password
        })
    })
    if (code === 200) {
        ElMessage.success('登录成功')
        // 跳转首页并记录用户凭证
    }else{
        ElMessage.error(msg)
    }
}
</script>
<style lang="scss" scoped></style>